<script setup>
  import $ from "jquery"
  import List from "@/pages/knowledge/list.vue";
  import Retrieval from "@/pages/knowledge/retrieval.vue";
  import Settings from "@/pages/knowledge/settings.vue";
  import {onMounted} from 'vue'
  onMounted(() => {
    $(".knowledge-item-func li").click(function () {
      $(this).addClass("active").siblings().removeClass("active")
    })
  })

</script>

<template>
  <el-container style="height: 100%">
    <el-aside width="300px" style="border: 1px solid #eee;">
      <div style="margin-top: 30px; text-align: center">
        <img src="@/assets/user.png" alt="" style="height: 50px; display: block; border-radius: 50%; margin: auto; margin-bottom: 10px">
        <h3>产教融合知识库</h3>
      </div>
      <el-divider></el-divider>
      <ul class="knowledge-item-func">
        <li class="active">
          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="ant-menu-item-icon"><path d="M14 11H8m2 4H8m8-8H8m12-.2v10.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C17.72 22 16.88 22 15.2 22H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 19.72 4 18.88 4 17.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 2 7.12 2 8.8 2h6.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C20 4.28 20 5.12 20 6.8Z" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
          <span>数据集</span>
        </li>
        <li>
          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="ant-menu-item-icon"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
          <span>搜索测试</span>
        </li>
        <li>
          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="ant-menu-item-icon"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.727 14.727a1.5 1.5 0 0 0 .3 1.655l.055.054a1.816 1.816 0 0 1 0 2.573 1.818 1.818 0 0 1-2.573 0l-.055-.055a1.5 1.5 0 0 0-1.654-.3 1.5 1.5 0 0 0-.91 1.373v.155a1.818 1.818 0 1 1-3.636 0V20.1a1.5 1.5 0 0 0-.981-1.373 1.5 1.5 0 0 0-1.655.3l-.054.055a1.818 1.818 0 0 1-3.106-1.287 1.818 1.818 0 0 1 .533-1.286l.054-.055a1.5 1.5 0 0 0 .3-1.654 1.5 1.5 0 0 0-1.372-.91h-.155a1.818 1.818 0 1 1 0-3.636H3.9a1.5 1.5 0 0 0 1.373-.981 1.5 1.5 0 0 0-.3-1.655l-.055-.054A1.818 1.818 0 1 1 7.491 4.99l.054.054a1.5 1.5 0 0 0 1.655.3h.073a1.5 1.5 0 0 0 .909-1.372v-.155a1.818 1.818 0 0 1 3.636 0V3.9a1.499 1.499 0 0 0 .91 1.373 1.5 1.5 0 0 0 1.654-.3l.054-.055a1.817 1.817 0 0 1 2.573 0 1.819 1.819 0 0 1 0 2.573l-.055.054a1.5 1.5 0 0 0-.3 1.655v.073a1.5 1.5 0 0 0 1.373.909h.155a1.818 1.818 0 0 1 0 3.636H20.1a1.499 1.499 0 0 0-1.373.91Z" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
          <span>配置</span>
        </li>
      </ul>
    </el-aside>
    <el-main style="overflow: hidden">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">知识库</el-breadcrumb-item>
        <el-breadcrumb-item>数据集</el-breadcrumb-item>
      </el-breadcrumb>
<!--      <List></List>-->
<!--      <Retrieval></Retrieval>-->
      <Settings></Settings>
    </el-main>
  </el-container>
</template>

<style scoped>
  ul li {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  ul li svg {
    display: block;
  }

  ul li span {
    padding-left: 10px;
    display: block;
  }

  ul li.active {
    background: #e6f4ff;
  }
</style>